<template>
  <div>
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
    />
    <c-permission-tabs v-model="activeType" code="tab">
      <el-tab-pane label="全部" name="all" opt-code="all">
        <List :active-type="activeType" :serach-filters="serachFilters" type="all" />
      </el-tab-pane>
      <el-tab-pane label="待委派" name="waitAppoint" opt-code="appoint">
        <List :active-type="activeType" :serach-filters="serachFilters" type="waitAppoint" />
      </el-tab-pane>
      <el-tab-pane label="待上传合同" name="waitUploadContract" opt-code="contractupload">
        <List :active-type="activeType" :serach-filters="serachFilters" type="waitUploadContract" />
      </el-tab-pane>
    </c-permission-tabs>
  </div>
</template>

<script>
import List from './components/list'
export default {
  name: 'DecorateAppoint',
  components: {
    List
  },
  data() {
    return {
      activeType: 'all',
      searchConfig: [
        {
          label: '门店',
          prop: 'shopCode',
          type: 'dialog',
          value: '',
          placeholder: '门店',
          config: {
            requestMethod: 'post',
            paramField: 'paramKeyword', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            }, // api返回数据默认字段
            selectData: []
          },
          dialogConfig: {
            title: '门店',
            interfacePath:
              '/select-service/api/v1/shop/page',
            setting: [
              { prop: 'code', title: '编码' },
              { prop: 'name', title: '名称' }
            ]
          }
        },
        {
          label: '客户',
          prop: 'clientCode',
          type: 'dialog',
          value: '',
          placeholder: '客户',
          config: {
            defaultProps: {
              label: 'name',
              value: 'code'
            }, // api返回数据默认字段
            multiple: false,
            selectData: [],
            apiHeader: {
              'Permission-App': 'slm',
              'permission-code': 'appoint'
            }
          },
          dialogConfig: {
            title: '客户',
            interfacePath:
              '/select-service/api/v1/customer/page',
            setting: [
              { prop: 'code', title: '编码' },
              { prop: 'name', title: '姓名' }
            ]
          }
        },
        {
          label: '办事处',
          prop: 'officeCode',
          type: 'dialog',
          value: '',
          placeholder: '办事处',
          config: {
            requestMethod: 'post', // 远程搜索请求方式:post,get;默认为get
            remote: true, // 远程搜索API地址
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            }, // api返回数据默认字段
            multiple: false,
            selectData: []
          },
          dialogConfig: {
            title: '办事处',
            interfacePath:
              '/select-service/api/v1/organization/page',
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            setting: [
              { prop: 'code', title: '编码' },
              { prop: 'name', title: '名称' }
            ]
          }
        },
        {
          label: '卖场建设项目号',
          prop: 'constCode',
          type: 'text',
          value: '',
          placeholder: '卖场建设项目号'
        },
        {
          type: 'select',
          prop: 'schedule',
          label: '装修进度',
          value: '',
          placeholder: '装修进度',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/DECORATION_SCHEDULE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        {
          type: 'select',
          prop: 'steps',
          label: '装修步骤',
          value: '',
          placeholder: '装修步骤',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/SHOP_DECORATION_STEPS`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        {
          type: 'select',
          prop: 'state',
          label: '装修状态',
          value: '',
          placeholder: '装修状态',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/SHOP_DECORATION_STATE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        {
          type: 'select',
          prop: 'range',
          label: '装修范围',
          value: '',
          placeholder: '装修范围',
          operator: 'like',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/DECORATION_RANGE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        {
          type: 'select',
          prop: 'marketType',
          label: '报图类型',
          value: '',
          placeholder: '报图类型',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/MARKET_TYPE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        {
          type: 'select',
          prop: 'constType',
          label: '门店建设类型',
          value: '',
          placeholder: '门店建设类型',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CONST_TYPE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        {
          label: '施工单位',
          prop: 'constUnitCode',
          type: 'dialog',
          value: '',
          placeholder: '施工单位',
          config: {
            paramField: 'unitName', // 远程搜索参数名
            defaultProps: {
              label: 'unitName',
              value: 'unitCode'
            }, // api返回数据默认字段
            selectData: []
          },
          dialogConfig: {
            title: '施工单位',
            paramField: 'unitName', // 远程搜索参数名
            interfacePath:
              '/slm-admin/api/v1/shopDecoration/pageUnitPupSelect',
            setting: [
              { prop: 'unitCode', title: '编码' },
              { prop: 'unitName', title: '名称' }
            ]
          }
        },
        {
          type: 'select',
          prop: 'nature',
          label: '装修性质',
          value: '',
          placeholder: '装修性质',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/DECORATION_NATURE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        },
        {
          type: 'select',
          prop: 'constState',
          label: '门店建设状态',
          value: '',
          placeholder: '装修性质',
          config: {
            remote: true,
            // paramField: 'keyWord', // 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CONST_STATE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' }
          }
        }
      ],
      serachFilters: []
    }
  },
  methods: {
    // confirmHandle(v) {
    //   console.log(this.formData, v)
    // },
    // resetHandle() {
    //   console.log('resetHandle')
    // }
    // 清空搜索条件
    clearSearch(data) {
      this.serachFilters = []
    },
    // 获取搜索条件
    handleSearch(data) {
      this.serachFilters = data.filtersRaw
    }
  }
}
</script>
